<!-- 公司sop配置 -->
<template>
  <dt-modal-edit
    ref="info"
    title="任务责任人节点设置"
    :label-width="100"
    okText="导入设置"
    :width="800"
    :previewFlag="previewFlag"
    :showOk="showOk"
    previewText="返回"
    cancelText="取消"
    @cancelData="cancelData"
    @onPreview="onPreview"
    @ok="onOk">
    <div class="taskInfo">
      <p>
        任务名称：{{
          chooseVal.sopName ? chooseVal.sopName : currentRow.sopName
        }}({{ roleNameVal }})
      </p>
    </div>

    <span class="tips">
      <Icon type="md-alert" class="tips_icon" />
      提示：{{ tips }}
    </span>

    <dt-grid ref="table" :onFetch="onFetch" :height="400" />
  </dt-modal-edit>
</template>

<script>
  import activityMgr from '@/biz/activity/activity'
  import columnOpt from '../opt/backRoleNodeSet'
  import sopApi from '@/biz/buildingManagement/sopConfig'
  export default {
    data() {
      return {
        previewFlag: true,
        showOk: true,
        info: {},
        tips: '',
        columns: [],
        data: [
          {
            orgName: '新房',
            orgId: 1,
            generateFlag: false,
            pointsFlag: false,
            _tree_expand: true
          },
          {
            orgName: 'DT事业部',
            orgId: 4,
            generateFlag: false,
            pointsFlag: false
          }
        ],
        configId: '',
        roleId: '',
        currentRow: {},
        chooseVal: {},
        roleNameVal:''
      }
    },
    methods: {
      onPreview() {
        this.$refs.info.hide()
        this.$emit('backClose')
      },
      cancelData() {
        this.$refs.table.clearFilter()
      },
      // 列表数据
      onFetch(data) {
        let params = {
          ...data,
          configId: this.chooseVal.id ? this.chooseVal.id : this.configId,
          roleId: this.roleId
        }

        return sopApi
          .backRolePreview(params)
          .then((res) => {
            return res
          })
          .catch(() => {})
      },
      show(val, current, roleId, dataVal,roleList) {
        console.log(dataVal,'111');
        this.chooseVal = dataVal
        this.currentRow = current
        this.configId = this.currentRow.id
        this.roleId = roleId


        console.log(roleList,roleId,'对比');
        roleList&&roleList.forEach(item=>{
          if(item.roleId == roleId){
            this.roleNameVal = item.roleName
          }
        })

        if (val == 'preview') {
          this.tips =
            '您可预览各组织所对应的“任务责任人”，如责任人未设置，则对应节点将不产生扣分'
          this.previewFlag = false
          this.showOk = false
        } else {
          this.tips =
            '您可预览各组织所对应的“任务责任人”设置，并导入至其他SOP任务中'
          this.previewFlag = true
          this.showOk = true
        }
        this.$refs.info.show()

        this.$refs.table.init(this, new columnOpt(this))
        this.$refs.table.fetch()
      },
      onOk() {
        let params = {
          sourceConfigId: this.chooseVal.id,
          targetConfigId: this.configId,
          roleId: this.roleId
        }
        return sopApi
          .leaderOrgImport(params)
          .then((res) => {
            this.$Message.success('导入成功')
            this.$emit('success')
            this.$refs.info.hide()
          })
          .catch(() => {})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .taskInfo {
    display: flex;
    flex-wrap: wrap;

    p {
      line-height: 2;
    }
  }

  .taskBj {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 10px 0;

    p {
      span {
        color: #0f42a7;
        cursor: pointer;
      }
    }
  }

  .downBox {
    border: 1px solid #e8e8e8;
    padding: 20px;
    margin-top: 10px;
  }

  .tips {
    text-align: right;
    line-height: 32px;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }

  .conpany_sop_edit {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 60%;
    padding: 30px 0;

    .taskSwitch {
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      span {
        margin-right: 5px;
      }
    }

    // .ivu-switch-large {
    //   width: 80px;
    //   height: 30px;
    //   line-height: 30px;
    //   margin-right: 5px;
    // }

    // ::v-deep.ivu-switch .ivu-switch-inner {
    //   left: 30px;
    // }

    // ::v-deep.ivu-switch-checked .ivu-switch-inner {
    //   left: 7px;
    // }

    // .ivu-switch-large.ivu-switch-checked:after {
    //   left: 50px;
    //   height: 26px;
    //   width: 26px;
    // }

    // .ivu-switch:after {
    //   height: 26px;
    //   width: 26px;
    // }

    // .sop_content {
    //   margin-bottom: 30px;

    //   .item_class {
    //     padding: 15px 0;
    //     font-size: 16px;
    //     line-height: 30px;
    //   }
    // }
  }

  .sync {
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;

    .sync_txt {
      line-height: 32px;
      font-size: 16px;
    }

    .sync_tips {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
</style>
